<template>
	<el-config-provider :locale="i18nLocale" :button="config" :size="assemblySize">
		<router-view></router-view>
	</el-config-provider>
</template>

<script setup lang="ts">
import { reactive, computed } from 'vue'
import { GlobalStore } from '@/stores'
import { useTheme } from '@/hooks/useTheme'
import { getBrowserLang } from '@/utils/util'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

const globalStore = GlobalStore()
const { initTheme } = useTheme()
initTheme()

// element config
const config = reactive({ autoInsertSpace: false })

// element language
const i18nLocale = computed(() => {
	if (globalStore.language == 'zh') return zhCn
	if (globalStore.language == 'en') return en
	return getBrowserLang() == 'zh' ? zhCn : en
})

// element assemblySize
const assemblySize = computed(() => globalStore.assemblySize)
</script>
